/*
 * facecloud管理员后台登录页面
 * @Author: ljb
 * @Date: 2018-03-26 10:18:23
 * @Last Modified by: ljb
 * @Last Modified time: 2019-11-14 17:16:37
 */
<style lang="less" rel="stylesheet/less" type="text/less">

.v-admin-login-index {
	position: relative;
	padding-top: 20px;
    width: 100%;
    height: 100%;
    padding-top: 20px;
    background-image: url('../../assets/img/1562732755_340420.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    background-color: #f0f2f5;
    color: #fff;
    .login-content {

    height: 600px;
		padding-top: -20px;
		margin: 8% auto 0;

		overflow: hidden;
		display: flex;
		justify-content: center;
		/*tabs选项卡切换*/
		.form-tabs {
			.ivu-tabs-tab {
				padding: 15px 20px;
				font-size: 16px;
			}
			.panx-login{
               height: 480px;
			}
		}
		/*tabs选项卡切换 END*/
        .login-box {
			background: #fff;
            position: relative;
            width: 500px;
            height: 600px;
      padding: 20px 40px;
      	border-radius: 10px;
            h1 {
                line-height: 80px;
                text-align: center;
                letter-spacing: 3px;
                img {
                    width: 50%;
                }
            }
            .left {
				position: absolute;
				top: 370px;
				left: 75px;

				font-size: 14px;
                &:hover {
                    opacity: 0.8;
                }
      }
           .right {
                padding-left: 4px;
                &:hover {
                    opacity: 0.8;
                }
			}
			.form-input {
				padding: 0 40px;
				margin: 70px 0  0  0;
				span {

					font-size: 12px;
					margin-left: 5px;
				}

            }
            .ivu-form .ivu-form-item-label{
                color:cornflowerblue;
             }
            .form-panx-input{
               	padding: 0 40px;
				margin: 30px 0;
				span {

					font-size: 12px;
					margin-left: 5px;
				}
				/*input输入框样式*/
				input {
					display: block;
					border: none;
					border-bottom: 1px solid #E5E5E5;
					width: 100%;
					outline: none;
					font-size: 14px;
					color: #333;
				}
            }
			/*表单按钮样式*/
			.form-button {
				text-align: center;
                 padding-top: 100px;
				.ivu-btn-primary {
					height: 45px;
					width: 350px;
					border-radius: 25px;
					font-size: 16px;
					color: #fff;

				}
      }
      .login-boxTitle{
          font-size: 26px;
          color:cornflowerblue;
          text-align: center;
      }
      .noAccount{
        color:#999999;
        position: absolute;
				top: 300px;
				right: 40px;

				font-size: 14px;
      }
      .noAccount_panx{
        color:#999999;
        position: absolute;
			top: 236px;
			right: -390px;

			font-size: 14px;
      }
			/*表单按钮样式 END*/
        }
    }
    .login-load {
        background-color: rgba(0, 0, 0, 0.5);
    }
    .footer-logo {
        position: absolute;
        bottom: 10px;
        width: 510px;
        height: 30px;
        left: 50%;
        margin-left: -250px;
        img {
			height: 100%;
			vertical-align: middle;
		}
		.footer-filing{
		 font-size: 16px;
		  margin-left: 30px;
         vertical-align: middle;
	}
	}
	.footer-filing{
		 font-size: 16px;
		  margin-left: 30px;

	}
	.language{
		position: absolute;
		right: 40px;
  }
  .faceCloud-title{
    position: absolute;
    color: white;
    font-size: 26px;
    left: 26px;
   font-weight: bold;
     }
}
</style>
<template>
	<div
		class="v-admin-login-index">
		<div class="faceCloud-title">FaceCloud</div>

		<div class="login-content _fun-hide">

			<div
				class="login-box">
				<div class="login-boxTitle">欢迎使用FaceCloud用户控制台</div>

				<Tabs
					:animated="false"
					class="form-tabs"
					value="panx"
				>
					<TabPane
						label="Panx登录"
						class="panx-login"
						name="panx"
					>
						<Form
							ref="formDataPanx"
							:model="form_data_panx"
							:rules="rulePanx"
						>
							<Form-item
								label="邮箱账号"
								prop="email"
								class="form-panx-input"
							>

								<input
									v-model="form_data_panx.email"
									name="email"
									placeholder="请输入邮箱账号"
									type="text"
								>
							</Form-item>
							<Form-item
								label="邮箱密码"
								prop="password"
								class="form-panx-input "
							>
								<input
									v-model="form_data_panx.password"
									placeholder="请输入邮箱密码"
									type="password" >
							</Form-item>


							<Form-item
								class="form-button"
							>
								<Button
									type="primary"
									long
									@click="handleSubmitPanx('formDataPanx')">
									登录
								</Button>
							</Form-item>

						</Form>
						<Spin
							v-if="login_loading"
							fix
						>
							<Icon
								type="ios-loading"
								size="18"
								class="demo-spin-icon-load" />
							<div>
								正在登录
							</div>
						</Spin>
					</TabPane>

				</Tabs>

			</div>
		</div>
		<!-- 底部logo -->
		<div class="footer-logo">
			<img
				src="//beauty-mirror.gz.bcebos.com/web_admin%2Fpanx_home_name.png"
				alt="">
			<span class="footer-filing">粤ICP备15045073号</span>
		</div>
	</div>
</template>
<script>
import qs from 'qs';

export default {
	data() {
		return {
			login_loading: false, // 登陆中

			type: 'panx',
			form_data_panx: {
				email: '',
				password: '',
			},
			rulePanx: {
				email: [
					{ required: true, message: '邮箱账号不能为空!', trigger: 'blur' },
					{ type: 'email', message: '请输入正确的邮箱格式!', trigger: 'blur' },
				],
				password: [
					{
						required: true,
						message: '密码不能为空',
						trigger: 'blur',
					},
					{
						type: 'string', min: 6, max: 16, message: '密码位数为6~16', trigger: 'blur',
					}
					,
				],
			},

		};
	},
	methods: {
		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs[name].resetFields();
		},
		// panx提交表单的方法
		handleSubmitPanx(name) {
           	this.$refs[name].validate((valid) => {
				if (valid) {
					this.login_loading = true;

					this.jumpToHomePagePanx(this.form_data_panx);
				} else {
					this.$Message.error('你输入的邮箱账号或密码有误');
				}
			});
		},
         		/*
        panx邮箱登录跳转到主页
        */
		jumpToHomePagePanx(param) {
           	this.axios.post(`${window.location.origin}/admin/api/v1/admin/login`, qs.stringify(param))
				.then(({ data }) => {
					if (data.code === 200) {
						this.$Message.success('登录成功');
						sessionStorage.setItem('name', data.admin.name);
						sessionStorage.setItem('token', data.token);
						sessionStorage.setItem('login', 'admin');
						this.$router.push({
							path: '/panx-home',

						});
					} else {
						throw new Error(data.error);
					}

				})
				.catch((err) => {
					this.$Message.error({
						content: err.message || err.statusText,
						duration: 5,
						closable: true,
					});

					this.login_loading = false;
				});
		},

	},
};
</script>
